<template>
  <div class="article">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="博文标题" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="博文类别" prop="category">
        <el-select v-model="form.category" placeholder="请选择文章类别">
          <el-option
            v-for="category in categories"
            :key="category.category_id"
            :label="category.category_alias"
            :value="category.category_alias"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="博文作者" prop="author">
        <el-input v-model="form.author"></el-input>
      </el-form-item>
      <el-form-item label="文章摘要" prop="abstract">
        <el-input type="textarea" v-model="form.abstract"></el-input>
      </el-form-item>
      <el-form-item label="上传封面图片" prop="img" style="height: 160px">
        <div class="img">
          <el-upload
            action="https://testopenapi.nbdeli.com/crm/customer/saveChannelLogoFile"
            :data="qn"
            :limit="1"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            list-type="picture-card"
            :class="{ disabled: uploadDisabled }"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" closeOnClickModal>
            <img width="100%" :src="form.dialogImageUrl" alt />
          </el-dialog>
        </div>
      </el-form-item>
      <el-form-item label="博文内容" prop="content"
        ><wang-editor
          @submitContent="handleContent"
          style="z-index: -999"
        ></wang-editor
      ></el-form-item>
    </el-form>
  </div>
</template>

<script>
import WangEditor from '../components/wangEditor.vue'
export default {
  name: 'ArticleAdd',
  components: { WangEditor },

  data() {
    return {
      qn: {
        token: '',
        key: '',
      },
      uploadDisabled: false,
      logoId: '1', //专区logo id
      dialogVisible: false,
      fileList: [],
      form: {
        title: '',
        category: '',
        abstract: '',
        author: '',
        content: '',
        dialogImageUrl: '',
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { max: 30, message: '长度在 30 个字符以内', trigger: 'blur' },
        ],
        category: [
          { required: true, message: '请选择文章分类', trigger: 'blur' },
        ],
        abstract: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
        img: [{ required: true, message: '请上传图片', trigger: 'blur' }],
        author: [{ required: true, message: '请输入作者名', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
        ],
      },
      categories: [
        { category_id: 1, category_alias: '旅行', article_total: 20 },
        { category_id: 2, category_alias: '美食', article_total: 16 },
        { category_id: 3, category_alias: '心情', article_total: 2 },
      ],
    }
  },
  // created() {
  //   this.getToken()
  // },
  methods: {
    // async getToken() {
    //   const { qiniuToken } = await this.$http.get('/qiniuToken')
    //   this.qn.token = qiniuToken
    // },
    //接收子组件传的值 发送请求更新数据库
    handleContent(html) {
      this.form.content = html
      console.log(this.form.content)
      this.$http
        .post('/blogs', {
          content: this.form.content,
        })
        .then((data) => {
          const { code } = data
          if (code == 0) {
            alert('创建博文成功')
          }
        })
    },
    //删除图片
    handleRemove(file, fileList) {
      console.log(file)
      this.uploadDisabled = false
    },
    //上传中
    handlePictureCardPreview(file) {
      console.log(file)
      this.form.dialogImageUrl = file.url
      this.dialogVisible = true
      this.uploadDisabled = true
    },
    //上传成功
    handleUploadSuccess(file, fileList) {
      console.log(fileList)
      this.form.dialogImageUrl = fileList.url
      console.log(this.form.dialogImageUrl)
      this.uploadDisabled = true
    },
  },
}
</script>

<style>
.article {
  width: 800px;
  margin: 40px;
}
</style>
